<template>
  <view class="tab-bar">
    <view class="tab-item" v-for="(item, index) in tabList" :key="index" @tap="switchTab(item.pagePath)">
      <image :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" mode="widthFix" />
      <!-- <text :class="{ active: currentPath === item.pagePath }">{{ item.text }}</text> -->
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const currentPath = ref('/pages/index/index')
const tabList = [
  {
    pagePath: '/pages/index/index',
    text: '首页',
    iconPath: '/static/images/tabbar/home.png',
    selectedIconPath: '/static/images/tabbar/home-a.png'
  },
  {
    pagePath: '/pages/reservation/reservation',
    text: '约课',
    iconPath: '/static/images/tabbar/reservation.png',
    selectedIconPath: '/static/images/tabbar/reservation-a.png'
  },
  {
    pagePath: '/pages/shop/shop',
    text: '商城',
    iconPath: '/static/images/tabbar/shopping.png',
    selectedIconPath: '/static/images/tabbar/shopping-a.png'
  },
  {
    pagePath: '/pages/mine/mine',
    text: '我的',
    iconPath: '/static/images/tabbar/mine.png',
    selectedIconPath: '/static/images/tabbar/mine-a.png'
  }
]

const switchTab = (path) => {
  console.log("path",path)
  if (currentPath.value === path) return
  uni.switchTab({
    url: path
  })
}

onMounted(() => {
  // 获取当前页面路径
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  currentPath.value = '/' + currentPage.route


})
</script>

<style lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0rpx;
  left: 0;
  right: 0;
  height: 140rpx;
  background: #FFFFFF;
  display: flex;
  padding-bottom: calc(80rpx + var(--safe-area-inset-bottom));
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding-top: 24rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  z-index:1000;
  overflow: hidden;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52rpx;
    height: 67rpx;

    image {
      width: 52rpx;
      height: 67rpx;
      margin-bottom: 4rpx;
    }

    text {
      font-size: 20rpx;
      color: #999;

      &.active {
        color: #8CB22C;
      }
    }
  }
}
</style>